<template>
  <div class="classRoomManage">
    <el-card>
      <!-- 顶部操作按钮 -->
      <div class="opt_wrap">
        <div class="opt_wrap_left">
          <p>
            已选中<span style="color: #1796EB">{{ selectedNum }}</span
            >项
          </p>
          <p
            v-if="showBtn && selectedNum === 1 && selectionCustomer"
            @click="editclassRoomShow"
          >
            <i class="iconfont icon-fenpai"></i>
            编辑
          </p>
          <p v-if="showBtn" @click="showDelModal = true">
            <i class="iconfont icon-shanchu1"></i>
            删除
          </p>
        </div>
        <div class="opt_wrap_right">
          <p class="add" @click="classRoomdialog = true">
            <i
              class="iconfont icon-xinjian1"
              style="color: white; font-size: 12px; margin-right: 4px;"
            ></i>
            新建
          </p>
        </div>
      </div>

      <!-- tag标签 -->
      <statisticsTag :data="statisticsTagData" @searchStatus="searchStatus" />

      <!-- 搜索 -->
      <div class="search_wrap">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-input
              placeholder="班级名称"
              v-model="searchCondition"
              clearable
              style="width: 100%"
              @keyup.enter.native="queryListData"
            >
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </el-col>
          <el-col :span="8">
            <el-date-picker
              v-model="queryDate"
              @change="queryListData"
              type="daterange"
              range-separator="~"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-col>
          <el-col :span="5">
            <el-select
              v-model="intention"
              placeholder="全部级别"
              @change="queryListData"
              filterable
              clearable
            >
              <el-option
                v-for="item in levelList"
                :key="item.label.name"
                :label="item.label.name"
                :value="item.label.code"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="5">
            <el-select
              v-model="teacher_id"
              placeholder="全部老师"
              @change="queryListData"
              filterable
              clearable
            >
              <el-option
                v-for="item in teacherData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-row>
      </div>

      <!-- tab表格 -->
      <div class="table_list">
        <el-table
          ref="classRoomTable"
          :data="tableListData"
          min-height="500"
          border
          v-loading="loading"
          @selection-change="handleSelectionStudent"
          style="width: 100%"
        >
          <el-table-column type="selection" align="center" width="40" />

          <el-table-column
            v-for="(item, index) in tableCaption"
            :key="index"
            :label="item.label"
            align="center"
          >
            <template slot-scope="scope">
              <span>
                {{ scope.row[item.value] }}
              </span>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-row :gutter="2">
                <el-col :span="6">
                  <el-button
                    type="text"
                    size="small"
                    circle
                    @click="editclassRoomModel(scope.row.id)"
                    >编辑</el-button
                  >
                </el-col>
                <el-col :span="6">
                  <el-button
                    type="text"
                    size="small"
                    circle
                    @click="deleteOne(scope.row.id)"
                    >删除</el-button
                  >
                </el-col>
                <el-col :span="12">
                  <el-button
                    type="text"
                    size="small"
                    circle
                    @click="
                      goToURL('classroomInfo', 'details', {
                        id: scope.row.id,
                        teacherName: scope.row.teacher,
                        className: scope.row.roomname,
                        teacher_id: scope.row.teacher_id
                      })
                    "
                    >查看详情</el-button
                  >
                </el-col>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <link-pagination
          :total="total"
          :currentPage="currentPage"
          :limit="limit"
          v-if="total != 0"
          @pagination="getPaginationParams"
        ></link-pagination>
      </div>
    </el-card>

    <!-- 对话框 -->
    <div>
      <!-- 删除对话框 -->
      <el-dialog
        title="提示"
        width="510px"
        :visible.sync="showDelModal"
        class="del_modal"
      >
        <div class="content">
          <p><i class="iconfont icon-tishi"></i></p>
          <p><span>是否将选中班级删除？</span></p>
          <p>删除成功之后，该操作将无法恢复</p>
        </div>
        <div class="btn">
          <el-button @click="showDelModal = false">返回</el-button>
          <el-button type="primary" @click="confirmDelete">确认</el-button>
        </div>
      </el-dialog>
      <!-- 创建对话框 -->
      <el-dialog title="新建班级" :visible.sync="classRoomdialog" width="30%">
        <el-form
          ref="addClassRoomRef"
          :model="addClassRoomForm"
          :rules="addClassRoomRul"
          label-width="120px"
        >
          <el-form-item label="班级名称" prop="roomname">
            <el-input v-model="addClassRoomForm.roomname"></el-input>
          </el-form-item>

          <el-form-item label="教师名称" prop="teacher_id">
            <el-select
              v-model="addClassRoomForm.teacher_id"
              placeholder="请选择教师"
              style="width: 100%"
            >
              <el-option
                v-for="item in teacherData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="级别" prop="level">
            <el-select
              v-model="addClassRoomForm.level"
              placeholder="请选择级别"
              style="width: 100%"
            >
              <el-option
                v-for="item in level"
                :key="item.label.name"
                :label="item.label.name"
                :value="item.label.code"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="学员类型" prop="degree_id">
            <el-select
              v-model="addClassRoomForm.degree_id"
              placeholder="请选择学员类型"
              style="width: 100%"
            >
              <el-option
                v-for="item in degree"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="classRoomdialog = false">取 消</el-button>
          <el-button type="primary" @click="confirmAddClassRoom"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <el-dialog
        title="编辑班级"
        :visible.sync="editclassRoomdialog"
        width="30%"
      >
        <el-form
          ref="editClassRoomRef"
          :model="editClassRoomForm"
          :rules="editClassRoomRul"
          label-width="120px"
        >
          <el-form-item label="班级名称" prop="roomname">
            <el-input v-model="editClassRoomForm.roomname"></el-input>
          </el-form-item>

          <el-form-item label="教师名称" prop="teacher_id">
            <el-select
              v-model="editClassRoomForm.teacher_id"
              placeholder="请选择教师"
              style="width: 100%"
            >
              <el-option
                v-for="item in teacherData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <!-- <el-form-item label="级别" prop="level">
            <el-select
              v-model="editClassRoomForm.level"
              placeholder="请选择级别"
              style="width: 100%"
            >
              <el-option
                v-for="item in level"
                :key="item.label.name"
                :label="item.label.name"
                :value="item.label.code"
              >
              </el-option>
            </el-select>
          </el-form-item> -->

          <!-- <el-form-item label="学员类型" prop="degree_id">
            <el-select
              v-model="editClassRoomForm.degree_id"
              placeholder="请选择学员类型"
              style="width: 100%"
            >
              <el-option
                v-for="item in degree"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item> -->
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editclassRoomdialog = false">取 消</el-button>
          <el-button type="primary" @click="confirmeditClassRoom"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import statisticsTag from "@/components/statisticsTag";
import http from "@/api/classroom";
import httpApi from "@/api/global";
import { paginationMixin } from "@/mixin";
import { formatDate, formatArray } from "@/utils";
export default {
  name: "classRoomManage",
  mixins: [paginationMixin],
  data() {
    return {
      // ---
      statisticsTagData: [
        {
          label: "全部班级",
          total: 0,
          status: "",
          icon: "icon-banji",
          backgroundStart: "#17B5EB",
          backgroundEnd: "#1797EB"
        },
        {
          label: "本科",
          total: 0,
          status: "2",
          icon: "icon-maozi",
          backgroundStart: "#02c779",
          backgroundEnd: "#02c765"
        },
        {
          label: "专科",
          total: 0,
          status: "1",
          icon: "icon-xueyuan",
          backgroundStart: "#F27450",
          backgroundEnd: "#F25751"
        }
      ],
      level: [],
      editclassRoomdialog: false,
      classRoomdialog: false,
      tableCaption: [
        {
          label: "班级名称",
          value: "roomname"
        },
        {
          label: "教师名称",
          value: "teacher"
        },
        {
          label: "学员类型",
          value: "degree"
        },
        {
          label: "级别",
          value: "level"
        },
        {
          label: "学员数量",
          value: "user_count"
        },
        {
          label: "创建时间",
          value: "create_time"
        }
      ],
      selectionCustomer: [],
      selectedNum: 0,
      showBtn: false,
      showDelModal: false,
      status: "",
      // ---
      tableListData: [],
      addClassRoomForm: {},
      editClassRoomForm: {},
      editClassRoomRul: {
        roomname: {
          required: true,
          message: "请填写班级名称",
          trigger: "blur"
        },
        teacher_id: {
          required: true,
          message: "请选择教师",
          trigger: "blur"
        },
        level: { required: true, message: "请选择级别", trigger: "blur" },
        degree_id: {
          required: true,
          message: "请选择学员类型",
          trigger: "blur"
        }
      },
      addClassRoomRul: {
        roomname: {
          required: true,
          message: "请填写班级名称",
          trigger: "blur"
        },
        teacher_id: {
          required: true,
          message: "请选择教师",
          trigger: "blur"
        },
        level: { required: true, message: "请选择级别", trigger: "blur" },
        degree_id: {
          required: true,
          message: "请选择学员类型",
          trigger: "blur"
        }
      },
      loading: false,
      searchCondition: null,
      queryDate: null,
      delNiche: null,
      levelList: [],
      teacherList: [],
      intention: null,
      teacher_id: null,
      teacherData: [],
      degree: [],
      center_id: "",
      searchDegree: ""
    };
  },
  components: {
    statisticsTag
  },
  methods: {
    editclassRoomShow() {
      this.editClassRoomForm = this.selectionCustomer[0];
      this.editclassRoomdialog = true;
    },
    editclassRoomModel(id) {
      http.getClassDetail(id).then(res => {
        this.editClassRoomForm = res.data;
      });
      this.editclassRoomdialog = true;
    },
    confirmeditClassRoom() {
      this.$refs.editClassRoomRef.validate(valid => {
        if (valid) {
          let params = this.editClassRoomForm;
          params.center_id = this.center_id;
          http.editClass(params).then(res => {
            if (res.code !== 200) {
              this.$message.success("编辑班级成功");
              this.editclassRoomdialog = false;
              this.getListData();
            }
          });
        }
      });
    },
    confirmAddClassRoom() {
      this.$refs.addClassRoomRef.validate(valid => {
        if (valid) {
          let params = this.addClassRoomForm;
          console.log("params", params);
          params.center_id = this.center_id;
          http.createClass(params).then(res => {
            this.$message.success("新建班级成功");
            this.classRoomdialog = false;
            this.getListData();
          });
        }
      });
      this.getDegreeList();
    },
    // 删除多个对话框确认
    confirmDelete() {
      let id = this.delNiche;
      http.deleteClass({ id }).then(res => {
        this.$message.success(res.msg || "删除成功");
        this.showDelModal = false;
        this.getListData();
      });
      this.getDegreeList();
    },
    // 删除一个班级
    deleteOne(id) {
      this.$confirm("此操作将删除该班级, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          http.deleteClass({ id: id }).then(res => {
            if (res.code === 200) {
              return false;
            } else {
              this.$message.success("删除成功");
              this.getListData();
            }
          });
        })
        .catch(() => {
          this.$message.info("删除操作已取消");
        });
      this.getDegreeList();
    },
    goToURL(name, pageType, id) {
      this.$router.push({ name, params: { pageType, id } });
    },
    goToURL2(name, pageType, id) {
      this.$router.push({ name, query: { pageType, id } });
    },
    // 搜索框事件
    queryListData() {
      this.getListData();
    },
    // 页面加载获取数据
    getListData(
      page = this.currentPage,
      list_rows = this.limit,
      search = this.searchCondition,
      level = this.intention,
      teacher_id = this.teacher_id,
      degree_id = this.searchDegree
    ) {
      this.loading = true;
      let params = { page, list_rows, search, level, teacher_id, degree_id };
      if (this.queryDate) {
        params["create_time_start"] = formatDate.toStr(
          new Date(this.queryDate[0]),
          "YYYY-MM-DD"
        );
        params["create_time_end"] = formatDate.toStr(
          new Date(this.queryDate[1]),
          "YYYY-MM-DD"
        );
      }
      http.getList(params).then(res => {
        console.log("res", res);
        this.loading = false;
        this.total = res.data.total;
        let tableListData = res.data.data;
        if (tableListData.length) {
          tableListData.map(item => {
            item.teacher = item.teacher.name;
            item.degree = item.degree.name;
          });
        }
        console.log("tableListData", tableListData);
        this.tableListData = tableListData;
      });
      this.getDegreeList();
    },
    // tab表单第一列选中事件
    handleSelectionStudent(val) {
      this.selectionCustomer = val;
      console.log(val);
      this.selectedNum = this.selectionCustomer.length;
      if (this.selectedNum === 0) {
        this.showBtn = false;
      } else {
        this.showBtn = true;
      }
      if (this.selectionCustomer.length !== 0) {
        this.delNiche = [];
        for (let item of this.selectionCustomer) {
          this.delNiche.push(item.id);
        }
      }
    },
    // tag标签绑定的搜索事件
    searchStatus(status) {
      this.searchDegree = status;
      console.log("searchDegree", this.searchDegree);
      this.getListData();
    },
    init() {
      let basicConfig = JSON.parse(sessionStorage.getItem("basicConfig"));
      this.levelList = formatArray(basicConfig.user_level);

      httpApi.getTeacherList().then(res => {
        this.teacherData = res.data;
      });

      let pageParams = this.$route.params;
      if (pageParams) {
        this.teacher_id = pageParams.teacher_id;
        console.log("this.teacher_id", this.teacher_id);
      }
    },
    getDegreeList() {
      httpApi.getDegreeList().then(res => {
        let total = 0;
        res.data.map(item => {
          if (item.id === 1) {
            this.statisticsTagData.map(items => {
              if (items.label === "专科") {
                items.total = item.count;
                total += item.count;
              }
            });
          }
          if (item.id === 2) {
            this.statisticsTagData.map(items => {
              if (items.label === "本科") {
                items.total = item.count;
                total += item.count;
              }
            });
          }
        });
        this.statisticsTagData.map(items => {
          if (items.label === "全部班级") {
            items.total = total;
          }
        });
        this.degree = res.data;
      });
    }
  },
  created() {
    this.init();
    this.getListData();
    let basicConfig = JSON.parse(sessionStorage.getItem("basicConfig"));
    let user = JSON.parse(sessionStorage.getItem("user"));
    this.level = formatArray(basicConfig.user_level);
    this.center_id = user.center_id;
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
@import "@/assets/style/listPage.scss";

.classRoomManage {
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  overflow: auto;
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    cursor: pointer;
    background: #f1f1f1;
  }

  &::-moz-scrollbar {
    display: none;
  }
  &::-ms-scrollbar {
    display: none;
  }
  &::-o-scrollbar {
    display: none;
  }

  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    width: 10px;
    cursor: pointer;
    background: #bbb;
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    border-radius: 0px;
    background: #f1f1f1;
  }
  .flag {
    padding: 0px 5px;
    background: #c6c7c9;
    color: #fff;
    border-radius: 14px;
  }
  .opt_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    &_left {
      display: flex;
      p {
        margin-right: 18px;
        color: #565656;
        font-size: 16px;
        cursor: pointer;
        &:hover {
          color: #1796eb;
        }
        &:nth-of-type(1) {
          cursor: default;
          color: #646464;
          &:hover {
            color: #646464;
          }
        }
      }
    }
    &_right {
      display: flex;
      align-items: center;
      p {
        margin-left: 18px;
        color: #565656;
        font-size: 16px;
        cursor: pointer;
        &:hover {
          color: #1796eb;
        }
      }
      .add {
        width: 72px;
        height: 30px;
        background: linear-gradient(top left, #17b5eb, #1796eb);
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        cursor: pointer;
        border-radius: 5px;
        &:hover {
          color: white;
        }
      }
    }
  }
  .search_wrap {
    margin: 20px 0;
    div {
      //   margin-right: 17px;
    }
  }
  .see_detail {
    cursor: pointer;
    color: #1796eb;
  }
  .del_modal {
    .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      p {
        &:nth-of-type(1) {
          width: 92px;
          height: 92px;
          border-radius: 50%;
          background: linear-gradient(to bottom, #f25851, #f27350);
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 18px;
          i {
            font-size: 40px;
            color: white;
          }
        }
        &:nth-of-type(2) {
          font-size: 20px;
          color: #333;
        }
        &:nth-of-type(3) {
          font-size: 14px;
          color: #999;
          margin-top: 7px;
        }
      }
    }
  }
  .excelContent {
    & > div {
      padding: 0 50px;
      p {
        color: #999;
        font-size: 14px;
        &:nth-of-type(1) {
          margin-top: 30px;
          margin-bottom: 8px;
          font-weight: 600;
        }
        &:nth-of-type(2) {
          padding-left: 30px;
          margin-bottom: 18px;
        }
        &:nth-of-type(3) {
          padding-left: 30px;
          background: #f5f5f5;
          line-height: 20px;
          padding: 16px 0 16px 20px;
          border-radius: 10px;
          margin-bottom: 30px;
        }
        &:nth-of-type(4) {
          font-weight: 600;
        }
        &:nth-of-type(5) {
          color: #b2b2b2;
          padding-left: 30px;
          margin-bottom: 10px;
        }
      }
    }
  }
  .btn {
    margin-top: 30px;
    width: 100%;
    display: flex;
    justify-content: center;
    /deep/ .el-button {
      width: 214px;
    }
  }
  .activate_modal {
    .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      .search_teacher {
        /deep/ .el-input {
          width: 440px;
        }
      }
      .radio {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        max-height: 120px;
        overflow-y: auto;
        div {
          width: 50%;
          height: 40px;
          display: flex;
          align-items: center;
        }
      }
      .check {
        .teacher_checkbox_group {
          display: flex;
          flex-wrap: wrap;
          width: 100%;
          max-height: 120px;
          overflow-y: auto;
          /deep/ .el-checkbox {
            margin-right: 0;
          }
          .teacher_checkbox {
            width: 50%;
            height: 40px;
            display: flex;
            align-items: center;
          }
        }
      }
      p {
        &:nth-of-type(1) {
          width: 92px;
          height: 92px;
          border-radius: 50%;
          background: linear-gradient(to bottom, #f25851, #f27350);
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 18px;
          i {
            font-size: 40px;
            color: white;
          }
        }
        &:nth-of-type(2) {
          font-size: 20px;
          color: #333;
        }
        &:nth-of-type(3) {
          font-size: 14px;
          color: #999;
          margin-top: 7px;
        }
      }
    }
  }
}
</style>
